<template>
	<view class="w-screen h-192px topBg">
		<view class="infoArea flex">
			<view class="border border-solid border-#edf1f160 w-84px h-84px rounded-full">
				<image @click="clickAvatar" class="w-84px h-84px rounded-full"
					:src="userInfo.avatar || '/static/R-C.png'"></image>
			</view>
			<view class="flex flex-col text-white justify-center pl-3">
				<view>
					{{userInfo.nickname}}
				</view>
				<view class="mt-2 text-gray-200">
					{{userInfo.username?'@':''}}{{userInfo.username}}
				</view>
			</view>
		</view>
	</view>

	<view class="m-4 rounded-3 overflow-hidden" @click="clickPayPassword">
		<wd-cell-group>
			<wd-cell title="支付密码">
				<text v-if="userInfo.isPayPassword">已设置</text>
				<text v-else class="text-gray-500">点击设置</text>
			</wd-cell>
		</wd-cell-group>
	</view>

	<view class="m-4 rounded-3 overflow-hidden">
		<wd-cell-group>
			<wd-cell title="用户名" :value="userInfo.username" />
			<wd-cell title="昵称" :value="userInfo.nickname" />
			<wd-cell title="性别" :value="Gender[userInfo.gender]" />
			<wd-cell title="手机号" :value="userInfo.phone" />
			<wd-cell title="邮箱" :value="userInfo.email" />
		</wd-cell-group>

		<wd-button type="primary" block custom-class="mt-4" @click="clickEdit">编辑资料</Wd-button>
		<wd-button block type="info" custom-class="mt-2" @click="clickLogot">退出登录</Wd-button>

	</view>

	<wd-action-sheet v-model="show">
		<view class="text-center py-4">
			编辑资料
		</view>
		<wd-form ref="formRef" :model="formData">
			<wd-cell-group border>
				<wd-input label="昵称" placeholder="请输入昵称" label-width="70px" clearable v-model="formData.nickname" />
				<wd-cell title-width="70px" title="性别">
					<view class="text-left">
						<wd-radio-group custom-class="flex mt-2px" shape="dot" inline v-model="formData.gender">
							<wd-radio value="male">男</wd-radio>
							<wd-radio value="female">女</wd-radio>
						</wd-radio-group>
					</view>
				</wd-cell>
				<wd-input label="手机号" placeholder="请输入手机号" label-width="70px" clearable v-model="formData.phone" />
			</wd-cell-group>
			<view class="px-4">
				<wd-button type="primary" block custom-class="mt-4" @click="save">保存</Wd-button>
			</view>
		</wd-form>
	</wd-action-sheet>
	<wd-toast />
	<wd-message-box selector="wd-message-box-slot">
		<wd-form ref="payPasswordFormRef" :model="model">
			<wd-cell-group border>
				<wd-input v-if="userInfo.isPayPassword" label="旧密码" label-width="60px" prop="oldPayPassword" show-password clearable
					v-model="model.oldPayPassword" placeholder="请输入旧密码"
					:rules="[{ required: true, message: '请填写旧密码' }]" />
				<wd-input label="新密码" label-width="60px" prop="payPassword" show-password clearable
					v-model="model.payPassword" placeholder="请输入新密码" :rules="[{ required: true, message: '请填写新密码' }]" />
			</wd-cell-group>
		</wd-form>
	</wd-message-box>
	<wd-message-box selector="wd-message-box-slot-logout" />

</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		useMessage,
		useToast
	} from 'wot-design-uni';
	import {
		getUserInfo,
		setPayPassword,
		updateUserInfo
	} from '../../api/auth';
	import {
		uploadFile
	} from '../../api/file';

	const userInfo = ref({});
	const fetchUserInfo = () => {
		getUserInfo().then(res => {
			userInfo.value = res.data;
		});
	}
	fetchUserInfo();
	const Gender = {
		male: '男',
		female: '女'
	};
	const show = ref(false);
	const formData = ref({});
	const clickEdit = () => {
		show.value = true;
		formData.value = {
			nickname: userInfo.value.nickname,
			gender: userInfo.value.gender,
			phone: userInfo.value.phone
		}
	}
	const toast = useToast();
	const save = () => {
		updateUserInfo(formData.value).then(res => {
			toast.success('更新成功');
			show.value = false;
			fetchUserInfo();
		});
	}
	const clickAvatar = () => {
		uni.chooseImage({
			success(res) {
				const path = res.tempFilePaths[0];
				console.log(path);
				uploadFile(path).then(res => {
					console.log(res);
					const {
						data,
						status
					} = JSON.parse(res.data);
					if (status === 200) {
						const avatar = data.url;
						updateUserInfo({
							avatar
						}).then(res => {
							toast.success("更新成功");
							fetchUserInfo();
						});
					} else {
						toast.error("上传失败");
					}
				});
			}
		})
	}
	const model = ref({});
	const payPasswordFormRef = ref();
	const payPasswordMessage = useMessage('wd-message-box-slot')
	const clickPayPassword = () => {
		model.value = {};
		payPasswordMessage.confirm({
			title: "设置支付密码",
			beforeConfirm: ({
				resolve
			}) => {
				payPasswordFormRef.value.validate().then(res=>{
					if(!res.valid)return;
					setPayPassword(model.value).then(res=>{
						fetchUserInfo();
						toast.success("设置成功");
						resolve(true);
					});
				});
			}
		});
	}

	const logoutMessage = useMessage('wd-message-box-slot-logout');
	const clickLogot = () => {
		logoutMessage.confirm({
			msg: '确认退出登录吗？'
		}).then(() => {
			uni.removeStorageSync('token')
			uni.navigateTo({
				url: '/pages/login/login'
			})
		})
	}
</script>

<style scoped>
	.topBg {
		background-image: linear-gradient(to right, #1989fa, #39a9ed);
		padding-top: 95px;
		box-sizing: border-box;
	}

	.infoArea {
		padding-left: 20px;
	}
</style>